Notion上で書いたmermaid文法レンダリング結果の手動キャプチャをmermaid-cliで置き換えた話

mermaid文法でのレンダリング結果をブログ等へ掲載したい場合、CMS次第ではmermaid文法レンダリングに対応している可能性もあります。そうでなければスクリーンショットを貼り付けることでしょう。

最近はNotionの文法ブロックを利用して手軽にプレビューできるため、画像としてキャプチャしやすくなりました。とはいえ、キャプチャ作成のために毎回Notion上でプレビューするのもやや手間です。

今回はコマンドラインベースでmermaid文法のレンダリング結果を画像に変換する方法について、DevIO用原稿内に含まれるmermaid文法を原稿から抜粋することなく画像生成に実使用している手順を例に挙げました。

変換の手順

筆者は原稿をNotionからnotion2mdを利用してエクスポート後、mermaid-cliにてmdファイル内のmermaid文法部分をpng形式で出力しています。

notion2md --unzipped -u https://notion.so/user/NNNNNNNNNNNN && mv notion2md-output/xxxxxxxxxxxxxxx.md 20231024192900.md
mmdc -i 20231024192900.md -o 20231024192900.png

ライブラリのインストール

notion2mdはpipから、mmdcはnpm経由でのインストールとなります。

poetry init
poetry install
poetry add notion2md
npm install -g @mermaid-js/mermaid-cli

注意事項

mmdcでの変換にはpng形式以外にもsvg形式が可能となっていますが、svg形式は利用に制限のかかるケースもあります。事前に掲載先で問題がないか確認しておきましょう。

あとがき

最初にmmdcで変換する際に実はsvg形式を取りました。理由はUsageでsvg出力にされていたためです。しかし、DevIOではsvg形式の表示ができず、ImageMagickを使ってsvgからpngへの変換を試しました。

mmdc経由で出力したsvgファイルはImageMagickのconvertではテキストを全てロストしていてフローチャートの図形のみ描画され、代替手段としてよく提案されているInkscapeではsvg内のCSSに対応しきれておらず、ライブラリの処理都合でテキスト及びフローチャートの図形描画も正常には完了しない状態でした。結果としてmmdcで直接pngに変換するという結論に至っています。

mmdcによる変換でのsvg形式内テキストデータについて、レンダリング上で扱いが大変だと分かったのは収穫でした。

mermaid文法の画像出力を考えている場合の参考になれば幸いです。